<template>
  <div style="width: 500px; height: 500px">
    <div id="chartChina" ref="chartChina"></div>
  </div>
</template>

<script>
import chinaMap from 'echarts/map/json/china.json'

export default {
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.chartChina)

    this.init()
  },
  methods: {
    init() {
      this.$echarts.registerMap('china', chinaMap)
      var option = {
        geo: {
          type: 'map',
          map: 'china',
          scaleLimit: {
            min: 1,
            max: 2
          },
          label: {
            color: '#000',
            show: true
          },
          emphasis: {
            label: {
              color: '#fff',
              show: true
            },
            itemStyle: {
              areaColor: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#073684' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#2B91B7' // 100% 处的颜色
                  }
                ]
              }
            }
          },
          roam: true,
          itemStyle: {
            areaColor: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#073684' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#061E3D' // 100% 处的颜色
                }
              ]
            },
            borderColor: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#00F6FF' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#87ADCB' // 100% 处的颜色
                }
              ]
            },
            shadowColor: 'rgba(10,76,139,1)',
            shadowOffsetY: 0,
            shadowBlur: 60,
            borderWidth: 1
          }
        },
        // label: {
        //   normal: {
        //     color: '#FFFFFF',
        //     show: true
        //   }
        // },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'red',
          formatter: '地区：{b}<br/>模拟数据：{c}'
        },
        visualMap: {
          top: 'center',
          left: 'left',
          min: 10,
          max: 300000,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [
          {
            name: '在地图中显示散点图',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            showEffectOn: 'render',  // 涟漪
            zlevel: 2,
            rippleEffect: {
              period: 2.5, // 波纹秒数
              brushType: 'stroke', // stroke(涟漪)和fill(扩散)，两种效果
              scale: 3 // 波纹范围
            },
            hoverAnimation: true,
            data: [
              {
                name: '北京',
                value: [116.41995, 40.18994],
                label: {
                  show: true,
                  position: 'right',
                  backgroundColor: '#153872',
                  padding: 2,
                  fontSize: 14,
                  overflow: 'break',
                  // formatter: ['{a|xxxx医院}', '{b|开方数量：50次}', '{b|开方收入：100000元}'].join(
                  //   '\n'
                  // ),
                  formatter:'{b}',
                  rich: {
                    a: {
                      color: '#d8a04c',
                      fontSize: 20,
                      lineHeight: 20
                    },
                    b: {
                      color: '#ffffff',
                      fontSize: 16,
                      lineHeight: 20
                    }
                  }
                },
                itemStyle: {
                  color: '#fe2321'
                }
              },
              {
                name: '郑州',
                value: [113.665412, 34.757975],
                label: {
                  show: false,
                  position: 'right',
                  backgroundColor: '#153872',
                  padding: 10,
                  fontSize: 16,
                  overflow: 'break',
                  formatter:'{c}',
                  rich: {
                    a: {
                      color: '#d8a04c',
                      fontSize: 20,
                      lineHeight: 20
                    },
                    b: {
                      color: '#ffffff',
                      fontSize: 16,
                      lineHeight: 20
                    }
                  }
                },
                itemStyle: {
                  color: '#fe2321'
                }
              },
              { name: '天津', value: [117.205126, 39.034933] },
              { name: '昆明', value: [102.81844, 24.906231] },
              { name: '广州', value: [113.26453, 23.155008] }
            ]
          }
        ]
      }

      this.myChart.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
#chartChina {
  width: 100%;
  height: 100%;
  background-color: transparent;
}
</style>
